/**
 * Created by levy on 16/4/8.
 */
import TipNum from "../components/TipNum.js";

(function(lf,r){
    var log = lf.utils.log,
        ajax = lf.utils.ajax,
        imgUrl = lf.imgUrl.approval,
        doAction = lf.bridgeJs.doAction;

    var consts = {
        contract: 'contract',
        askForLeave: 'leave',
        document: 'file',
        overtime: 'workOvertime',
    };


    var Header = r.createClass({
        getInitialState: function () {
            return {
                btns: [
                    {
                        text: '我的审批',
                        img: 'my-approval.png'
                    },
                    {
                        text: '我发起的',
                        img: 'my-apply.png'
                    }
                ],
                num: ''
            }
        },
        getNumber(user) {
            ajax({
                data:{
                    staffId: user.id
                }
            },lf.api.workflow.getCount, (data) => {
                this.setState({num: data.workFlowWaitCount});
            });
        },
        componentWillMount() {
            this.getNumber(this.props.user);

            lf.appJs.refresh((user) => this.getNumber(user));
        },
        componentDidMount: function(){
            var $links = $('.header a'),
                url = 'approval-list.html',
                title = '我的审批';

            $links.each(function(i){
                var link = $(this);

                if(i == 1){
                    url += '?flag=apply';
                    title = '我发起的';
                }

                //解决函数作用域问题
                link.url = url;
                link.title = title;

                $(this).on('click', function () {
                    doAction(link.url,link.title);
                });
            });
        },
        render: function () {
            var btns = this.state.btns.map((btn,i) => {
                return(
                    <a key={'head' + i} className="flex-item flex-center" href="javascript:">
                        <img src={imgUrl + btn.img} alt=""/>
                        <span>{btn.text}</span>
                        {i == 0 ? <TipNum num={this.state.num}/> : ''}
                    </a>
                );
            });

            return(
                <div className="header flex-box-row white-bg">
                    {btns}
                </div>
            )
        },
    });

    var Body = r.createClass({
        getInitialState: function(){
            return{
                btns: [], //二维数组
            }
        },
        componentWillMount: function () {
            var state = this.state,
                me = this;

            ajax({
                success: function (data) {
                    var list = data.dataList,
                        btns = [[]];

                    //为二维数组赋值
                    for(var i = 0, len = list.length; i < len; i++){
                        //二维数组的下标
                        var index = Math.floor(i / 3);

                        //undefined是不能进行操作的
                        if(!btns[index])
                            btns[index] = [];
                        btns[index].push(list[i])
                    }

                    //如果在挂载函数体里,直接赋值也可以，不一定要调用setState()
                    btns = btns.map(function (btn,i) {
                        return (
                            <div key={'btnRow'+i} className="flex-box-row">
                                {me.btnRender(btn)}
                            </div>
                        )
                    });

                    //嵌套在函数里面，就需要setState()了
                    me.setState({
                        btns:btns,
                    })
                },
            },lf.api.workflow.getProcessList);

        },
        /**
         * 后期重构 TODO
         * @param btnArray
         * @returns {*}
         */
        btnRender: function (btnArray) {
            var btns = btnArray.map(function(data,i){
                var name = data.name,
                    img = 'document.png';

                if(name == consts.askForLeave)
                    img = 'ask-for-leave.png';
                else if(name == consts.overtime)
                    img = 'overtime.png';
                else if(name == consts.contract)
                    img = 'contract.png';


                return(
                    <a key={'btn-'+i} onTouchEnd={this.doAction} data-id={data.id} className="item flex-box-col white-bg" href="javascript:;">
                        <img src={imgUrl + img} />
                        <span>{data.displayName}</span>
                    </a>
                )
            }.bind(this));
            return btns;
        },
        //妈的，使用挂载函数，居然query不到
        doAction: function (e) {
            var link = e.target;

            if(link.tagName == 'IMG' || link.tagName == 'SPAN'){
                link = $(e.target).parent();
            }else{
                link = $(e.target);
            }

            var id = link.data('id'),
                url = 'approval-detail.html?processId=' + id,
                title = link.find('span').text();

            doAction(url,title);
        },
        render: function () {
            return (
                <div className="body">
                    {this.state.btns}
                </div>
            );
        }
    });

    var Root = r.createClass({
        render: function () {
            return <div className="approval index">
                        <Header user={this.props.user}/>
                        <Body />
                    </div>
        }
    });

    lf.bridgeJs.getUser(function (user) {
        r.render(
            <Root user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css({backgroundColor: '#efeff4'});
            }
        )
    });
})(liefeng,React)
